<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>
    <!--省市级联-->
    <select id="province">
        <option>------请选择所在省份------</option>
    </select>
    <select id="city">
        <option>------请选择所在市区------</option>
    </select>
</body>
<script>
    //1. 把所有的省添加  第一个select的 options中
    let provis = ["北京市","河北省","河南省", "山东省", "山西省", "辽宁省"];
    //获取 省份的 下拉框
    let provinceSelect = document.getElementById("province" );
    let citySelect = document.getElementById("city" );
    //对所有的省进行遍历，创建option，添加到下拉框
    for(let i = 0; i < provis.length ; i ++) {
        //<option value="1">北京市</option>
        //创建option
        let option = document.createElement("option");
        //设置选项的value值
        option.value = i;
        //设置标签中的文本
        option.innerText = provis[i];
        //添加到下拉框
        provinceSelect.appendChild(option);
    }


    let city = [["昌平区", "海淀区",  "朝阳区", "房山区", "东城区", "西城区"],
        ["邯郸市", "唐山市", "石家庄市", "秦皇岛", "承德市"],
        ["郑州市", "驻马店市", "洛阳市", "开封市", "商丘市", "安阳市", "周口市"],
        ["菏泽市", "济南市", "德州市", "青岛市", "烟台市", "威海市"],
        ["太原市", "运城市", "大同市", "阳泉市", "长治市", "临汾市"],
        ["葫芦岛", "锦州市", "鞍山市", "大连市", "沈阳市"]
    ];
    //2. 给select绑定一个onchange事件
    provinceSelect.addEventListener("change", function() {
        //当执行了改变事件时，需要对市区对应的下拉框清空
        citySelect.innerHTML = "<option>------请选择所在市区------</option>";

        //当省的 所以为 0 ，获取到的是  市区 的第一个数组
        let provIndex = provinceSelect.value;



        //2.1 当选择了省时，把省对应的市添加到 第二个select中
        let cityList = city[provIndex];
        if(cityList != null && cityList.length > 0 ){
            for(let i = 0;i < cityList.length; i ++) {
                let option = document.createElement("option");
                option.value = i;
                option.innerText = cityList[i];
                citySelect.appendChild(option);
            }
        }


    });


</script>
</html>